<template>
  <div :style="{'width':total+'px'}">
    <el-image v-for="(url,index) in imgUrlArr" :key="index"
              :style="{'width':width+'px','height':width+'px','margin':'0 '+margin+'px '+margin/2+'px '+margin+'px'}"
              :src="url"
              :preview-src-list="imgUrlArr">
    </el-image>
  </div>
</template>
<script>
export default ({
  props: {
    imgUrlArr: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      length: 4,
      total: 415,
      width: 100,
      margin: 2.5,
      height: 331
    }
  },
  created () {
    this.calculate()
  },
  methods: {
    calculate () {
      if (this.$props.imgUrlArr.length === 1) {
        let total = 280
        this.width = total
      } else if (this.$props.imgUrlArr.length === 2) {
        let total = this.total - this.margin * 4
        this.width = total / 2
      } else {
        let total = this.total - this.margin * 6
        this.width = total / 3
      }
    }
  }
})
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
